<template>
  <el-dialog :title="showTitle" :visible="showDialog" @close="btnclear">
    <!-- 设置所有标题的宽度 -->
    <el-form
      label-width="120px"
      ref="valueFrom"
      :model="valueFrom"
      :rules="rules"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input
          style="width: 80%"
          placeholder="1-50个字符"
          v-model="valueFrom.name"
        />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input
          style="width: 80%"
          placeholder="1-50个字符"
          v-model="valueFrom.code"
        />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          style="width: 80%"
          placeholder="1-50个字符"
          v-model="valueFrom.manager"
          @focus="getEmployeeSimple"
        >
          <el-option
            v-for="item in people"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          style="width: 80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
          v-model="valueFrom.introduce"
        />
      </el-form-item>
    </el-form>
    <!-- 确定和取消 -->
    <el-row type="flex" :gutter="24" justify="center" slot="footer">
      <el-col :span="6">
        <el-button size="small" @click="btnclear">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import {
  getDepartments,
  Adddepartments,
  getDepartDetail,
  updateDepartments,
} from "@/api/departments";
import { getEmployeeSimple } from "@/api/employees";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    treeNode: {
      type: Object,
      default: null,
    },
  },
  computed: {
    showTitle() {
      return this.valueFrom.id ? "编辑部门" : "新增子部门";
    },
  },
  methods: {
    async getEmployeeSimple() {
      this.people = await getEmployeeSimple();
    },
    //获取部门详情
    async getDepartDetail(id) {
      this.valueFrom = await getDepartDetail(id);
    },
    //确定后发起新增请求
    btnOk() {
      this.$refs.valueFrom.validate(async (isOK) => {
        if (isOK) {
          if (this.valueFrom.id) {
            await updateDepartments(this.valueFrom);
          } else {
            await Adddepartments({ ...this.valueFrom, pid: this.treeNode.id });
          }
          this.$emit("addDepts"); //通知父组件刷新数组
          this.$emit("update:showDialog", false); //关闭弹窗
        }
      });
    },
    //取消后重置数据
    btnclear() {
      this.valueFrom = {
        name: "", // 部门名称
        code: "", // 部门编码
        manager: "", // 部门管理者
        introduce: "", // 部门介绍
      };
      this.$refs.valueFrom.resetFields(); //重置表单校验字段
      this.$emit("update:showDialog", false); //关闭弹窗
    },
  },
  data() {
    const checkNameRepeat = async (rule, value, callback) => {
      const { depts } = await getDepartments();
      let isRepeat = false
      if(this.valueFrom.id){
        isRepeat =depts.filter(item=>item.id !==this.valueFrom.id && item.pid===this.valueFrom.id).some(item=>item.name===value)
      }else {
     isRepeat = depts
        .filter(item => item.pid === this.treeNode.id)
        .some(item => item.name === value);}
      isRepeat
        ? callback(new Error(`同级部门下已经有${value}的部门了`))
        : callback();
    };
    const checkCodeRepeat = async (rule, value, callback) => {
      let isRepeat = false
      const { depts } = await getDepartments();
      if(this.valueFrom.id){
          isRepeat.depts.some(item=>item.id !==this.valueFrom.id &&item.code===value &&value)
      }
      isRepeat = depts
        .some((item) => item.code === value && value);
      isRepeat
        ? callback(new Error(`组织架构中已经有部门使用${value}编码`))
        : callback;
    };
    return {
      valueFrom: {
        name: "", // 部门名称
        code: "", // 部门编码
        manager: "", // 部门管理者
        introduce: "", // 部门介绍
      },
      people: [], //获取员工的简单列表
      rules: {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "部门名称要求1-50个字符",
            trigger: "blur",
          },
          {
            trigger: "blur",
            validator: checkNameRepeat,
          },
        ],
        code: [
          { required: true, message: "部门编码不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "部门编码要求1-50个字符",
            trigger: "blur",
          },
          {
            trigger: "blur",
            validator: checkCodeRepeat,
          },
        ],
        manager: [
          { required: true, message: "部门负责人不能为空", trigger: "blur" },
        ],
        introduce: [
          { required: true, message: "部门介绍不能为空", trigger: "blur" },
          {
            trigger: "blur",
            min: 1,
            max: 300,
            message: "部门介绍要求1-50个字符",
          },
        ],
      },
    };
  },
};
</script>

<style>
</style>